<template>
  <div>
    <div class="box">
      <el-table class="left" :data="tableData" style="width: 75%">
        <el-table-column label="用户" prop="username" />
        <el-table-column label="视频地址" prop="videoUrl">
          <template #default="scope">
            <a :href="scope.row?.videoUrl" download="1.jpg">{{
              scope.row.videoUrl
            }}</a>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template #header>
            <el-input
              v-model="search"
              size="small"
              placeholder="Type to search"
            />
          </template>
          <template #default="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="right">
        <div class="head">待审核</div>
        <ul>
          <li v-for="(item, index) of noAccess" :key="index">
            <p>
              发布者：<span class="name">{{ item.username }}</span>
            </p>
            <video @click="fullScreen" :src="item.videoUrl"></video>
            <div class="foot">
              <el-button
                class="btn"
                type="success"
                @click="accessVideo(item, index)"
                round
                >通过</el-button
              >
              <el-button
                class="btn"
                type="danger"
                @click="noaccessVideo(item, index)"
                round
                >不通过</el-button
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import {
  getVideo,
  changeVideo,
  checkVideo,
  delVideo,
} from "@/require/index.js";
let search = ref("");
let tableData = ref([]);
let noAccess = ref([]);
// 对审核通过和未通过的分类
const doList = async () => {
  let { data } = await getVideo();
  let arr = [];
  let arr1 = [];
  data.data.forEach((item) => {
    if (item.state == 1) {
      arr.push(item);
    } else {
      arr1.push(item);
    }
  });
  tableData.value = [...arr];
  noAccess.value = [...arr1];
  console.log(tableData.value, noAccess.value);
  return;
};
doList();

const fullScreen = (e) => {
  e.target.requestFullscreen();
};
const handleDelete = async (a, b) => {
  let { data } = await delVideo([b.id]);
  if (data.code == "200") {
    tableData.value.splice(a, 1);
  }
};
const accessVideo = async (a, b) => {
  let { data } = await checkVideo([a.id]);
  if (data.code == "200") {
    tableData.value.push(a);
    noAccess.value.splice(b, 1);
  }
};
const noaccessVideo = async (a, b) => {
  let { data } = await delVideo([a.id]);
  if (data.code == "200") {
    noAccess.value.splice(b, 1);
  }
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 700px;
  display: flex;

  .left {
    margin-right: 15px;
    overflow: auto;
  }
  .right {
    width: 30%;
    height: 100%;
    border-left: 1px solid rgba(167, 165, 165, 0.555);
    overflow: auto;
    .head {
      width: 100%;
      text-align: center;
    }
    // background: red;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-left: 0px;
      // margin: 0;
      li {
        margin-top: 10px;
        width: 50%;
        text-align: center;
        p {
          font-size: 12px;
        }
        .btn {
          width: 50px;
          height: 20px;
          font-size: 12px;
        }
        video {
          // width: 70%;
          height: 100px;
        }
      }
    }
  }
}
</style>